<template>
  <div class="va-container">
    <!-- 会员类型 -->
    <div class="flex-row " style="margin-bottom: 28px;">
      <!-- <div class="form-left flex-row">
        <div class="duigou-con inner-left">
          <el-radio v-model="typeinfo.memberType" label="TEAM" border>团体会员</el-radio>
          <span class="duigou" v-show="typeinfo.memberType === 'TEAM'"><li class="duigou-inner el-icon-check"></li></span>
        </div>
        <div class="duigou-con inner-right">
          <el-radio v-model="typeinfo.memberType" label="PERSONAL" border>个人会员</el-radio>
          <span class="duigou" v-show="typeinfo.memberType === 'PERSONAL'"><li class="duigou-inner el-icon-check"></li></span>
        </div>
      </div> -->
      <div class="form-left flex-row btn-radio">
        <div class="duigou-con inner-left">
          <el-radio v-model="typeinfo.gisMember" label="YES" border>中地协会员</el-radio>
          <span class="duigou" v-show="typeinfo.gisMember === 'YES'"><li class="duigou-inner el-icon-check"></li></span>
        </div>
        <div class="duigou-con inner-right">
          <el-radio v-model="typeinfo.gisMember" label="NO" border>非中地协会员</el-radio>
          <span class="duigou" v-show="typeinfo.gisMember === 'NO'"><li class="duigou-inner el-icon-check"></li></span>
        </div>
      </div>
    </div>
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('username')}">
        <input type="text" required v-model="typeinfo.username" v-validate="'required|max:20'" name="username" autocomplete="off" />
        <label data-content="姓名*" ></label>
      </div>
      <div class="form-right flex-row gender">
        <label class="ewai">性别*</label>
        <el-radio v-model="typeinfo.sex" label="1" class="man-radio">
          男
          <span class="gender-checked" v-show="typeinfo.sex === '1'"></span>
        </el-radio>
        <el-radio v-model="typeinfo.sex" label="2" class="nv-radio">
          女
          <span class="gender-checked" v-show="typeinfo.sex === '2'"></span>
        </el-radio>
      </div>
    </div>
    <div class="flex-row " >
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('birthday')}">
        <el-date-picker
         v-validate="'required'" name="birthday"
         class="width-full date-icon-right"
         v-model="typeinfo.birthday"
         value-format="yyyy-MM-dd"
         format="yyyy-MM-dd"
         :pickerOptions="pobirthday"
         placeholder="">
       </el-date-picker>
        <label data-content="出生日期*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('phone')}">
        <input type="text" required v-model="typeinfo.phone" v-validate="'required|phone'" name="phone"/>
        <label data-content="手机*"></label>
      </div>
    </div>
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('fixedTelephone')}">
        <input type="text" required v-model="typeinfo.fixedTelephone" v-validate="'required|fax'" name="fixedTelephone"/>
        <label data-content="固定电话*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('email')}">
        <input type="text" required v-model="typeinfo.email" v-validate="'required|email'" name="email"/>
        <label data-content="Email*"></label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('professionalTitle')}">
        <input type="text" required v-model="typeinfo.professionalTitle" v-validate="'required'" name="professionalTitle"/>
        <label data-content="职称*" ></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('position')}">
        <input type="text" required  v-model="typeinfo.position" v-validate="'required'" name="position"/>
        <label data-content="职务*"></label>
      </div>
    </div>
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('politicalBackground')}">
        <el-select v-model="typeinfo.politicalBackground " placeholder="" class="width-full" v-validate="'required'" name="politicalBackground">
          <el-option
            v-for="item in options"
            :filterable="true"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <label data-content="政治面貌*"></label>
      </div>
    </div>
    <!-- <div class="tc">
      <el-button type="success width-200" plain round>下一步</el-button>
    </div> -->
  </div>
</template>

<script>
  export default {
    title: '会员类型及代表人信息 ',
    name: 'type-info',
    data () {
      return {
        activeName: '1',
        typeinfo: {},
        options: [{
          value: 'ZGDY',
          label: '中共党员'
        }, {
          value: 'ZGYBDY',
          label: '中共预备党员'
        }, {
          value: 'GQTY',
          label: '共青团员'
        }, {
          value: 'MGDY',
          label: '民革党员'
        }, {
          value: 'MMMY',
          label: '民盟盟员'
        }, {
          value: 'MJHY',
          label: '民建会员'
        }, {
          value: 'MJINHY',
          label: '民进会员'
        }, {
          value: 'MGDDY',
          label: '农工党党员'
        }, {
          value: 'ZGDDY',
          label: '致工党党员'
        }, {
          value: 'TMMY',
          label: '台盟盟员'
        }, {
          value: 'WDPRS',
          label: '无党派人士'
        }, {
          value: 'PTJM',
          label: '普通居民'
        }
      ],
        abc: '',
        birthday: '',
        vipType: '1',
        gender: '1',
        pobirthday: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
      }
    },
    props: {
      data: {}
    },
    mounted () {
      // this.typeinfo = Object.assign({}, this.data)
      this.typeinfo = Object.assign({}, this.data)
    },
    watch: {
      'typeinfo': {
        handler: function (val, oldVal) {
          this.$emit('update:data', this.typeinfo)
        },
        deep: true
      }
    },
    methods: {
      validate () {
        return this.$validator.validateAll()
      }
    }
  }
</script>
